<template>
  <div >
    <div v-for="(item, index) in dataList" :key="index" class="dataSetting" flex>
      <p style="width: 100px;text-align: right;">{{item.billName}}</p>
      <div flex flex-wrap style="margin-left: 10px;width: calc(100% - 150px);">
        <p class="recordText" v-for="(el,index) in item.buttonList" :key="index" :class="{'active':el.type}" @click="typeChange(el)">{{el.name}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import {
  GetAllBillDataPepedom,
  GetAllBilldata
} from '@/api/apis/jurisdiction.js'
export default {
  name: "dataSetting",
  data() {
    return {
      dataList: [],
      dataPepedom: [],
      dataSet: [],
      activeList:[],
    }
  },
  created() {
    // this.inPage()
  },

  methods: {
    inPage() {
      let dataPepedom = this.getDataPepedom()
      let dataSet = this.getDataSet()
      Promise.all([dataSet, dataPepedom]).then((value) => {
        this.getDataList(value[0], value[1])
      })
    },

    async getDataPepedom() {
      let res = await GetAllBillDataPepedom()
      if (res.code == 1) {
        return res.data[0]
      }
    },
    async getDataSet() {
      let res = await GetAllBilldata()
      if (res.code == 1) {
        res.data[0].forEach(el=>{
          el.buttonList = []
        })
        return res.data[0]
      }
    },
    getDataList(dataSet, dataPepedom) {
      this.dataList = []
      let arr =  []
      dataSet.forEach((el, index) => {
        dataPepedom.forEach((item) => {
          if (el.billKindID == item.billKindID) {
            el.buttonList.push(item)
          }
        })
      })
      this.dataList = dataSet
      if(this.activeList.length > 0){
        this.dataList.forEach(item=>{
          item.buttonList.forEach(bItem=>{
            this.activeList.forEach(el=>{
              if(el == bItem.id){
                bItem.type = true
              }
            })
          })
        })
      }
    },
    typeChange(item) {
      item.type = !item.type
      this.$forceUpdate()
    },
  }
}


</script>
<style lang="scss">
$activeColor: var(--bg-color, "#00aaff");

.el-icon-star-on {
  /* color: #00aa00; */
  color: $activeColor;
}

.dataSetting {
  color: #000;
  .recordText {
    border: 1px solid #fff;
    width: 80px;
    padding: 8px 0;
    text-align: center;
    font-size: 12px;
    cursor: pointer;
    background: #f2f2f2;
    color: #e0e0e0;
    margin:3px;
  }

  .recordText.active {
    background: $activeColor;
    color: #fff;
  }
}
</style>
